<template>
  <van-popup
    class="rewardProgress"
    v-model:show="props.show"
    position="center"
    :z-index="999999"
    teleport="body"
    close-on-popstate
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
    @click-overlay="closePopup"
    @click-close-icon="closePopup"
  >
    <!-- 内容 -->
    <div class="box">
      <div class="box-bg"></div>
      <!-- 标题 -->
      <div class="box-title items-center">
        <img
          class="box-title-leftimg"
          src="/image/assetDetails/desc-logo.svg"
        />
        <div class="box-title-text">
          {{ $t("inviteFriends.djygjlyd") }}
        </div>
        <img
          class="box-title-rightimg"
          src="/image/assetDetails/desc-logo.svg"
        />
      </div>
      <!-- 表格 -->
      <div class="box-table">
        <div class="box-table-header items-center">
          <div class="box-table-header-name">
            {{ $t("inviteFriends.vipdj") }}
          </div>
          <div class="box-table-header-name">
            {{ $t("inviteFriends.hykdbdc") }}
          </div>
        </div>
        <div class="box-table-item items-center">
          <div class="box-table-item-left items-center">
            <img
              class="box-table-item-left-icon"
              src="/image/inviteFriends/level0.svg"
            />
            <div class="box-table-item-left-text">{{ "VIP 0" }}</div>
          </div>
          <div class="box-table-item-desc">{{ "500" }}</div>
        </div>
        <div class="box-table-item items-center">
          <div class="box-table-item-left items-center">
            <img
              class="box-table-item-left-icon"
              src="/image/inviteFriends/level1.svg"
            />
            <div class="box-table-item-left-text">{{ "VIP 1" }}</div>
          </div>
          <div class="box-table-item-desc">{{ "1000" }}</div>
        </div>
        <div class="box-table-item items-center">
          <div class="box-table-item-left items-center">
            <img
              class="box-table-item-left-icon"
              src="/image/inviteFriends/level2.svg"
            />
            <div class="box-table-item-left-text">{{ "VIP 2" }}</div>
          </div>
          <div class="box-table-item-desc">1500</div>
        </div>
        <div class="box-table-item items-center">
          <div class="box-table-item-left items-center">
            <img
              class="box-table-item-left-icon"
              src="/image/inviteFriends/level3.svg"
            />
            <div class="box-table-item-left-text">
              {{ $t("inviteFriends.vip3more") }}
            </div>
          </div>
          <div class="box-table-item-desc">2000</div>
        </div>
      </div>
      <!-- 描述 -->
      <div class="box-desc">
        {{ $t("inviteFriends.hyzcjlhzdff") }}
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="rewardProgress">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { switchTabBar, toThousands, getOssFileUrl } from "@/utils";
import { useDateFormat } from "@vueuse/core";
import { useUserStore } from "~~/store/modules/user";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    isLotteryType?: any; // 1 大赢家 2 队伍分红
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "refresh"]);

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

/**
 * @description: 关闭弹窗
 */
const closePopup = () => {
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.rewardProgress {
  background-color: transparent !important;
  margin: 0;
  max-width: 100vw;
  overflow: initial;
}
.box {
  position: relative;
  margin: 0 25 * 2px;
  padding: 20 * 2px 15 * 2px;
  border-radius: 12 * 2px;
  overflow: hidden;
  background-color: #fff;
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 155 * 2px;
    width: 100%;
    background: linear-gradient(180deg, #cce9ff 0%, #fff 50.23%);
  }

  &-title {
    position: relative;
    z-index: 9;
    justify-content: center;
    margin-bottom: 15 * 2px;
    &-leftimg {
      height: 9 * 2px;
      margin-right: 10 * 2px;
    }
    &-rightimg {
      height: 9 * 2px;
      margin-left: 10 * 2px;
    }
    &-text {
      text-align: center;
      color: #141924;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
  &-table {
    position: relative;
    z-index: 9;
    border-radius: 12 * 2px;
    overflow: hidden;
    margin-bottom: 15 * 2px;
    &-header {
      justify-content: space-between;
      padding: 9 * 2px 20 * 2px;
      background: linear-gradient(90deg, #007bff 0%, #00b2ff 100%);
      &-name {
        color: #fff;
        font-size: 13 * 2px;
        font-weight: 510;
      }
    }
    &-item {
      padding: 11 * 2px 20 * 2px;
      justify-content: space-between;
      background-color: #f0f3fa;
      &-left {
        &-icon {
          width: 22 * 2px;
          margin-right: 4 * 2px;
        }
        &-text {
          color: #141924;
          font-size: 13 * 2px;
          font-weight: 510;
        }
      }
      &-desc {
        color: #141924;
        font-size: 13 * 2px;
        font-weight: 510;
      }
    }
  }
  &-desc {
    color: #999da7;
    font-size: 13 * 2px;
    font-weight: 400;
    line-height: 18 * 2px;
    text-align: center;
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
